<template>
    <div class="w-100 padr-10">
        <MyDialog :model-value="true" :type="DialogType.C2" title="功能权限" @close="onClose">
            <div class="marb-10">
                <!-- <el-checkbox label="展开/折叠" v-model="isExp" @change="onChangeExp"></el-checkbox>
                <el-checkbox label="全选/全不选" v-model="isSelectAll" @change="onChangeSelectAll"></el-checkbox> -->

                <el-button type="primary" @click="onChangeExp">展开/折叠</el-button>
                <el-button type="warning" @click="onChangeSelectAll">全选/全不选</el-button>
            </div>
            <div class="PermissionSetting">
                <el-tree ref="RegulatorPermissionConfigTreeRef" :data="data" show-checkbox node-key="autoID" @check="onCheck" :default-expand-all="false" :expand-on-click-node="false" :check-on-click-node="true" :props="{ class: customNodeClass, label: 'name' }" />
            </div>

            <template #footer>
                <el-button type="primary" @click="onSave" :loading="loading">保存</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { DialogType } from "@/_gx/TsEnums";

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

const customNodeClass = (data: any) => {
    return data.lv;
};

//列表数据
const data = ref<any>();
//已经选择的数据
const selectIDs = ref<any>([]);

//展开与全选
const isExp = ref(false);
const isSelectAll = ref(false);

const RegulatorPermissionConfigTreeRef = ref(null);

//初始化
const Init = async () => {
    //获取所有权限的树型数据
    await App.CallApi(Api.Permission.GetTreePermissionByRegulator, {
        success: (res) => {
            data.value = res;
        },
    });

    //获取当前监管部门已经设置的权限数据
    await App.CallApi(Api.RegulatorPermission.GetSearch(), {
        data: {
            _RegulatorID: rowAutoID.value,
        },
        success: (res) => {
            selectIDs.value = res.map((x) => x.permissionID);
            RegulatorPermissionConfigTreeRef.value.setCheckedKeys(selectIDs.value);
        },
    });
};

//改变事件
const onCheck = (data: any, checkStatus: any) => {
    selectIDs.value = checkStatus.checkedKeys;
};

//展开、折叠
const onChangeExp = () => {
    isExp.value = !isExp.value; //button用

    for (let i = 0; i < RegulatorPermissionConfigTreeRef.value.store.root.childNodes.length; i++) {
        const item = RegulatorPermissionConfigTreeRef.value.store.root.childNodes[i];
        item.expanded = isExp.value;

        for (let j = 0; j < item.childNodes.length; j++) {
            const jtem = item.childNodes[j];
            jtem.expanded = isExp.value;
        }
    }
};

//全选、全不选
const onChangeSelectAll = () => {
    isSelectAll.value = !isSelectAll.value; //button用

    if (isSelectAll.value == true) {
        var copy = Gx.DeepCopy(data.value);

        let ids = Gx.Tree2List(copy).map((x) => {
            return x.autoID;
        });

        RegulatorPermissionConfigTreeRef.value.setCheckedKeys(ids);
        selectIDs.value = ids;
    } else {
        RegulatorPermissionConfigTreeRef.value.setCheckedKeys([]);
        selectIDs.value = [];
    }
};

//保存
const loading = ref(false);
const onSave = () => {
    if (selectIDs.value.length == 0) {
        App.Tips({ msg: "请至少选择一个数据！" });
        return;
    }

    let data = selectIDs.value.map((x) => {
        return { regulatorID: rowAutoID.value, permissionID: x };
    });

    loading.value = true;
    App.CallApi(Api.RegulatorPermission.BatchInsert, {
        data: data,
        success: () => {
            onClose();
        },
        complete: () => {
            loading.value = false;
        },
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>

<style lang="scss" scoped>
.PermissionSetting {
    width: 100%;
    height: 400px;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    padding-top: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

:deep(.lv1 > .el-tree-node__content) {
    margin-bottom: 10px;

    .el-tree-node__label {
        font-size: 18px;
    }
}

:deep(.lv2 > .el-tree-node__content > .el-tree-node__label) {
    font-size: 16px;
}

:deep(.lv2) {
    margin-bottom: 10px;
}

:deep(.lv2 .el-tree-node__children) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-size: 14px;

    .el-tree-node {
        width: 24%;

        .el-tree-node__label {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

// .el-tree-node.is-expanded>.el-tree-node__children {
//     display: flex !important;
// }
</style>
